<template>
  <div class="content">
    <el-card class="content-card">
      <div slot="header" class="row-bg-query">
        <div><el-input v-model="params.name" size="small" placeholder="请输入菜单名称" clearable /></div>
        <div><el-button type="primary" size="small" icon="el-icon-search" @click="search">搜索</el-button></div>
      </div>
      <div class="operating">
        <div><el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="handleCreate">添加</el-button></div>
        <div><el-button type="primary" size="small" icon="el-icon-refresh-left" @click="refresh">刷新</el-button></div>
      </div>
      <el-table
        v-loading="loading"
        :data="menus"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column align="center" prop="id" label="ID" width="120" />
        <el-table-column align="center" prop="name" label="名称" width="180" />
        <el-table-column align="center" prop="type" label="菜单类型">
          <template slot-scope="scope">
            <el-tag :type="scope.row.type === 1 ? 'success' : ''" disable-transitions>
              {{ menuType[scope.row.type] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="path" label="路径" />
        <el-table-column align="center" prop="icon" label="图标">
          <template slot-scope="scope">
            <svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="description" label="描述" />
        <el-table-column align="center" label="是否启动" prop="enabled">
          <template slot-scope="scope">
            <el-switch :value="scope.row.enabled" :active-value="1" :inactive-value="0" @change="handleSwitch(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间" width="180" />
        <el-table-column align="center" fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogTagForm" width="30%">
      <el-form :model="form">
        <el-form-item label="名称" label-width="20%">
          <el-input v-model="form.name" class="form-input" placeholder="请输入名称..." autocomplete="off" />
        </el-form-item>
        <el-form-item label="类型" label-width="20%">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="路径" label-width="20%">
          <el-input v-model="form.path" class="form-input" placeholder="请输入路径..." autocomplete="off" />
        </el-form-item>
        <el-form-item label="图标" label-width="20%">
          <el-input v-model="form.icon" class="form-input" placeholder="请输入图标..." autocomplete="off" />
          <svg-icon v-if="form.icon" :icon-class="form.icon" />
        </el-form-item>
        <el-form-item label="是否启动" label-width="20%">
          <el-switch v-model="form.enabled" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item label="描述" label-width="20%">
          <el-input v-model="form.description" class="form-input" type="textarea" rows="4" placeholder="请输入描述..." autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTagForm = false">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="handleAddOrUpdate">保 存</el-button>
      </div>
    </el-dialog>
    <el-pagination
      v-if="page.pages"
      background
      layout="prev, pager, next"
      :current-page.sync="params.current"
      :page-size="page.size"
      :page-count="page.pages"
      @current-change="turnPage"
    />
  </div>
</template>
<script>
import { getList, del, addOrUpdate } from '@/api/menu'

export default {
  data() {
    return {
      loading: false,
      menuType: {
        0: '导航菜单',
        1: '左侧标题'
      },
      params: {
        current: 1,
        size: 10,
        parentId: 0
      },
      page: {
        current: 1,
        size: 10
      },
      menus: [],
      dialogTagForm: false,
      buttonLoading: false,
      dialogStatus: '',
      textMap: {
        update: '修改菜单',
        create: '添加菜单'
      },
      options: [
        {
          value: 0,
          label: '导航菜单'
        },
        {
          value: 1,
          label: '左侧标题'
        }
      ],
      form: {
        name: null,
        enabled: 0,
        type: 0,
        parentId: 0,
        path: null,
        sort: 1,
        description: null
      }
    }
  },
  watch: {
    'page.current': function(newCurrent) {
      this.params.current = newCurrent
    },
    'params.name': function(newName) {
      if (newName === '' || newName === null) {
        this.params.name = null
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取标签列表
    fetchData() {
      this.loading = true
      this.params.parentId = 0
      getList(this.params).then(response => {
        if (response.code === 200) {
          this.menus = response.data.records
          this.page.current = response.data.current
          this.page.size = response.data.current
          this.page.total = response.data.total
          this.page.pages = response.data.pages
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
        this.loading = false
      })
    },
    // 加载子类
    load(tree, treeNode, resolve) {
      this.loading = true
      this.params.parentId = tree.id
      this.params.name = null
      getList(this.params).then(response => {
        if (response.code === 200) {
          setTimeout(() => {
            resolve(response.data.records)
          }, 1000)
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
        this.loading = false
      })
    },
    // 搜索
    search() {
      this.fetchData()
    },
    // 翻页
    turnPage() {
      this.fetchData()
    },
    // 打开添加
    handleCreate() {
      this.dialogStatus = 'create'
      this.dialogTagForm = true
      this.form.id = null
      this.form.name = null
      this.form.path = null
      this.form.enabled = null
      this.form.type = null
      this.form.sort = this.menus !== null && this.menus !== undefined ? this.menus.length + 1 : 1
    },
    // 打开编辑
    handleEdit(index, row) {
      this.dialogStatus = 'update'
      this.dialogTagForm = true
      if (this.form.id === null || this.form.id === undefined || this.form.id !== row.id) {
        this.form.id = row.id
        this.form.name = row.name
        this.form.path = row.path
        this.form.enabled = row.enabled
        this.form.type = row.type
        this.form.sort = null
        this.form.description = row.description
        this.form.icon = row.icon
      }
    },
    // 开关
    handleSwitch(row) {
      const enabled = row.enabled === 1 ? 0 : 1
      this.temp = {
        id: row.id,
        enabled: enabled
      }
      addOrUpdate(this.temp).then(response => {
        if (response.code === 200) {
          this.fetchData()
          this.$notify({
            title: '成功',
            message: row.name + '菜单' + (enabled === 1 ? '开启成功' : '关闭成功'),
            type: (enabled === 1 ? 'success' : 'warning'),
            duration: 2000
          })
        } else {
          this.$notify({
            title: '请求失败',
            message: response.message,
            type: 'error',
            duration: 2000
          })
        }
      })
      row.enabled = enabled
    },
    // 添加或修改菜单
    handleAddOrUpdate() {
      this.buttonLoading = true
      addOrUpdate(this.form).then(response => {
        if (response.code === 200) {
          this.fetchData()
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '保存失败',
            message: response.message,
            type: 'error',
            duration: 2000
          })
        }
        this.buttonLoading = false
        this.dialogTagForm = false
      })
    },
    // 删除菜单
    handleDelete(index, row) {
      this.$confirm('是否永久删除该菜单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        del(row.id).then(response => {
          if (response.code === 200) {
            // 删除数组里面的对象，无需再请求
            this.menus.forEach(item => {
              if (item.id === row.id) {
                this.menus.splice(this.menus.indexOf(item), 1)
                return
              }
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: response.message
            })
          }
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 刷新
    refresh() {
      this.fetchData()
    }
  }
}
</script>

<style lang="scss">
.content {
    .el-card__body {
      padding: 10px 20px 20px 20px;
      .operating {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .form-input {
    width: 80%;
  }

</style>
